<template>
  <Row>
    <Col span="12">
      <Input v-model="myModel.form.a" placeholder=""></Input>
      <Button type="default" @click="myModel.addA()">操作</Button>
      {{ myModel.form.a }}
      <Button type="default" @click="myModel.addB()">操作addB</Button>
      <Input v-model="myModel.form.c" placeholder=""></Input>
      <Button type="default" @click="myModel.addC()">操作addC</Button>
      <Input v-model="myModel2.a" placeholder=""></Input>
      <Button type="default" @click="myModel2.addA()">操作</Button>
      <div v-for="(item, index) in myModel2.list">{{ item }}</div>
      <div v-for="(item, index) in myModel2.list2">{{ item }}</div>
      <Button type="default" @click="myModel2.add2()">操作自己修改</Button>
    </Col>
  </Row>
  <div class="box"></div>
  <component is="c1"></component>
  <component is="c2"></component>
  <component :is="'c1'"></component>
  <!-- <component :is="component"></component>
	<component :is="component2"></component> -->
  <Row v-for="(item, index) in data.list">
    <Row v-if="item.type == 1">
      type:{{ item.type }} : {{ item.data.a }}
      <Button type="default" @click="item.addA()">操作A</Button>
    </Row>
    <Row v-if="item.type == 2">
      type:{{ item.type }} : {{ item.data.b }}
      <Button type="default" @click="item.addB()">操作B</Button>
    </Row>
  </Row>
  <Row>
    <Row>
      {{ material.a }}
    </Row>
    <Row>
      <Button type="default" @click="material.add()">操作</Button>
    </Row>
  </Row>
  <Row>
    <Button type="default" @click="add">操作1</Button>
  </Row>
</template>
<script lang="jsx">
import c1 from './250929/c1.vue'
import c2 from './250929/c2.vue'
import MyModel from './250929/myModel.js'
import Material from './250929/Material'
export default {
  components: {
    c1,
    c2
  },
  data() {
    const context = this
    return {
      component: c1,
      component2: {
        data() {
          return {
            a: 1,
            b: 2
          }
        },
        render() {
          return (
            <div class="box">
              {this.a} : {this.b}
            </div>
          )
        }
      },
      myModel2: new MyModel(),
      myModel: {
        form: {
          a: 1,
          b: 2
        },
        // addA: () => {
        // 	this.myModel.form.a++;
        // },
        addA() {
          this.form.a++
        },
        addB() {
          this.form.a++
        },
        addC() {
          this.form.c++
        }
      },
      data: {
        list: [
          {
            type: 1,
            data: {
              a: 1,
              b: 2
            },
            addA() {
              context.add()
              this.data.a++
            }
          },
          {
            type: 2,
            data: {
              a: 3,
              b: 4
            },
            addB() {
              this.data.b++
            }
          }
        ]
      },
      material: new Material(this)
    }
  },
  methods: {
    add() {
      console.log(9999)
      let mvalue = this.material.a
      console.log(mvalue)
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
